<template>
  <div class="login-page">
    <video id="myVideo" autoplay muted loop>
      <source
        src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4"
        type="video/mp4"
      >
    </video>
    <div class="box">
      <el-form ref="form" :model="form" :rules="rules" class="demo-form">
        <img
          src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"
          alt=""
        >
        <el-form-item prop="account">
          <el-input v-model="form.account" />
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>

        <el-form-item prop="code">
          <el-input v-model="form.code" />
        </el-form-item>

        <el-form-item>
          <el-button style="width: 100% " type="danger" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="gentleReminder">
        仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！
      </div>
      <i class="el-icon-user-solid" />
      <i class="el-icon-s-goods" />
      <i class="el-icon-key" />
      <img class="imgis" :src="isImg" alt="">
    </div>
  </div>
</template>

<script>
import { getLogin } from '@/api/user'
export default {
  name: 'LoginPage',
  data() {
    return {
      isImg: '',
      form: {
        account: 'shenlingadmin',
        password: '123456',
        code: '',
        key: '1234'
      },
      rules: {
        account: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    this.createdGetlogin()
  },

  methods: {
    async createdGetlogin() {
      const number = Math.floor(Math.random() * 10000)
      console.log(number)
      this.form.key = number
      const res = await getLogin({
        key: number
      })
      // console.log(res)
      this.isImg = res.request.responseURL
    },
    login() {
      // 传给  Vuex
      this.$refs.form.validate(async valid => {
        if (!valid) return
        await this.$store.dispatch('user/loginActions', this.form)
        // 登录完成跳转页面
        this.$router.push('/')
        // 提醒用户 登录成功
        this.$message.success('登录成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  position: relative;
  width: 100%;
  height: 100%;
  #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }
  .box {
    position: absolute;
    top: 45%;
    left: 45%;
    margin: -180px 0 0 -160px;
    width: 450px;
    height: 490px;
    padding: 36px 40px;
    background: #fff;
    border-radius: 10px;
    .demo-form {
      text-align: center;
      img {
        width: 195px;
        height: 54px;
        margin-bottom: 28px;
      }
    }
  }

  .gentleReminder {
    line-height: 20px;
    font-size: 14px;
    color: #fd3333;
    margin-bottom: 20px;
  }
}
::v-deep .el-input__inner {
    height: 50px;
    padding: 0px 15px 0px 48px;
}
.el-icon-user-solid {
 position: absolute;
 top: 27%;
 left: 12%;
 font-size: 25px;
}
.el-icon-s-goods {
 position: absolute;
 top: 42%;
 left: 12%;
 font-size: 25px;
}
::v-deep .el-icon-view {
  font-size: 18px ;
}
.el-icon-key {
position: absolute;
 top: 57%;
 left: 12%;
 font-size: 25px;
}
.imgis {
  position: absolute;
  top: 56%;
  left: 73%;
  width: 71px;
  height: 32px;
}
</style>
